<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台首页</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/font-awesome/4.4.0/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="__CSS__/style.min.css?v=4.1.0" rel="stylesheet">
    <link href="__STATIC__/laydate/theme/default/laydate.css" rel="stylesheet">
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-2">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-primary pull-right">今日</span>
                    <h5>今日新增会员</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins">{$tcount}</h1>
                    <div class="stat-percent font-bold text-navy"></div>
                    <small></small>
                </div>
            </div>
        </div>
        <div class="col-sm-2">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-primary pull-right">本月</span>
                    <h5>本月新增会员</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins">{$mcount}</h1>
                    <div class="stat-percent font-bold text-danger"></div>
                    <small></small>
                </div>
            </div>
        </div>
        <div class="col-sm-2">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-primary pull-right">本年</span>
                    <h5>本年新增会员</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins">{$ycount}</h1>
                    <div class="stat-percent font-bold text-danger"></div>
                    <small></small>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-8">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>会员日统计</h5>
                </div>
                <div class="ibox-content no-padding">
                    <div>
                        <form>
                            日期：<input id="todyid"><input type="button" value="查询" onclick="search('todyid',1,'todymain')">
                        </form>
                    </div>
                    <div class="ibox-content" style="height: 350px" id="todymain">

                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-8">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>会员月统计</h5>
                </div>
                <div class="ibox-content no-padding">
                    <div>
                        <form>
                            日期：<input id="monthid">
                            <input type="button" value="查询" onclick="search('monthid',2,'monthmain')">
                        </form>
                    </div>
                    <div class="ibox-content" style="height: 350px" id="monthmain">

                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-8">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>会员年统计</h5>
                </div>
                <div class="ibox-content no-padding">
                    <div>
                        <form>
                        日期：<input id="yearid"><input type="button" value="查询" onclick="search('yearid',3,'yearmain')">
                        </form>
                    </div>
                    <div class="ibox-content" style="height: 350px" id="yearmain">

                    </div>
                </div>
            </div>
        </div>
        <!--<div class="col-sm-4">-->
            <!--<div class="ibox float-e-margins">-->
                <!--<div class="ibox-title">-->
                    <!--<h5>系统说明</h5>-->
                <!--</div>-->
                <!--<div class="ibox-content">-->
                    <!--<p>snake 一个采用thinkphp5开发，-->
                        <!--旨在为大家提供一个可用的便捷的后台系统。-->
                    <!--</p>-->
                    <!--<div class="alert alert-info">-->
                        <!--交流群： 159640205-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
    </div>
</div>
<script src="https://cdn.staticfile.org/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="__JS__/plugins/echarts/echarts-all.js"></script>
<script src="__STATIC__/laydate/laydate.js"></script>
<script type="text/javascript">
    //日期范围
    laydate.render({
        elem: '#todyid'
        ,range: '~'
    });
    laydate.render({
        elem: '#monthid'
        ,type: 'month'
        ,range: '~'
    });
    laydate.render({
        elem: '#yearid'
        ,type: 'year'
        ,range: '~'
    });
    search('todyid',1,'todymain');
    search('monthid',2,'monthmain');
    search('yearid',3,'yearmain');
    function search(str,type,mm){
        var date = $('#'+str).val();
        if(date == ''){
            var data = [];
        }else{
            var data = date.split("~");
        }


        $.getJSON("{:url('count/memberCountTb')}", {'data' : data,type:type}, function(res){
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById(mm));

            // 指定图表的配置项和数据
            var option = {
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: res.data.x
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: res.data.y,
                    type: 'line',
                    areaStyle: {}
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        });
    }
</script>
</body>
</html>
